<template>
  <div class="app-container">
    <div class="tip">
      <p>谨慎使用，群发内容不能涉及广告类营销内容，群发频率不能过高，不能频繁发送相同内容，若违规群发后导致模板消息功能受限需自行承担责任！</p>
      <p>
        每次群发任务最多可发送500条，发送期间可能会导致网站服务器出现卡顿等情况，请合理安排模板发送时间！如果模板消息可发送次数全部耗尽将影响网站正常微信通知功能！
        <a class="useLink" target="_blank" href="http://doc.74cms.com/#/se/wxmass_send">使用帮助</a>
      </p>
      <p>
        首次使用此功能需首先
        <span class="tipClick" @click="tipClick()">【点击同步公众号粉丝】</span>
        ！为避免频繁发送消息被举报受限请合理控制发送频率，如被微信官方处罚责任需自行承担责任！
      </p>
    </div>
    <el-tabs v-model="activeName" type="border-card" @tab-click="tabClick">
      <el-tab-pane label="消息群发" :lazy="true" name="first"><smsContent ref="refsmsContent" :mass-copy-data="massCopyData" @dialogClose="dialogClose" /></el-tab-pane>
      <el-tab-pane label="群发记录" :lazy="true" name="second"><smsRecord ref="refsmsRecord" @btn-click="updateActiveName" /></el-tab-pane>
      <el-tab-pane label="模板配置" :lazy="true" name="third"><smsTemplateConfig ref="refsmsTemplateConfig" /></el-tab-pane>
    </el-tabs>
    <dialogModel ref="refdialogModel" :center-dialog-visible="centerDialogVisible" :sync_num="sync_num" @updateCenterDialogVisible="updateCenterDialogVisible" />
    <el-dialog title="" :visible.sync="pressLoading" width="400px" center :close-on-click-modal="false" :show-close="false">
      <el-progress type="line" :percentage="progressVal" />
      <div class="pro-txt pro-txt-first">正在同步</div>
      <div class="pro-txt pro-txt-second">请耐心等待</div>
    </el-dialog>
  </div>
</template>

<script>
import smsContent from '../components/smsContent.vue'
import smsTemplateConfig from '../components/smsTemplateConfig.vue'
import smsRecord from '../components/smsRecord.vue'
import dialogModel from '../components/dialogModel.vue'
import { getWechatUser, wechatCheckPull, wechatMassSyncSurvey, wechatMassSyncTask } from '@/api/massSMS'
export default {
  components: {
    smsContent,
    smsTemplateConfig,
    smsRecord,
    dialogModel
  },
  data() {
    return {
      centerDialogVisible: false,
      sync_num: 0,
      activeName: 'first',
      massCopyData: {},
      userSelfClick: false, // 用户是否自己主动点击同步公众号粉丝
      pressLoading: false,
      progressVal: 0
    }
  },
  mounted() {
    this.getWechatCheckPull()
  },
  methods: {
    updateCenterDialogVisible() {
      this.centerDialogVisible = false
    },
    tipClick() {
      this.$confirm('是否确定同步公众号粉丝?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.userSelfClick = true
          this.getWechatUserData()
        })
        .catch(() => {})
    },
    getWechatMassSyncTask() {
      this.pressLoading = true
      const requestList = []
      const progressValPre = 100 / this.sync_num
      this.progressVal = progressValPre
      for (let i = 0; i < this.sync_num; i++) {
        requestList.push(wechatMassSyncTask)
      }
      let j = 0 // 记录发送的请求个数
      const send = async () => {
        if (j >= requestList.length) {
          this.pressLoading = false
          this.$message.success('同步成功！')
          // 发送完毕
          return
        }
        await requestList[j]()
        if (this.progressVal <= 100 - progressValPre) {
          this.progressVal += progressValPre
        }
        j++
        send()
      }
      send() // 发送请求
    },
    updateActiveName(data) {
      this.activeName = 'first'
      this.massCopyData = data
    },
    tabClick() {
      if (this.activeName == 'first') {
        this.$nextTick(() => {
          this.$refs.refsmsContent.initData()
          this.$refs.refsmsContent.getWechatMassTplSendQuota()
          this.$refs.refsmsContent.form.title = ''
          this.$refs.refsmsContent.form.jump_url = null
          this.$refs.refsmsContent.form.jump_type = 1
          this.$refs.refsmsContent.form.date_range = null
          this.$refs.refsmsContent.form.tpl_id = 38
          this.$refs.refsmsContent.due_num = 0
        })
      } else if (this.activeName == 'second') {
        this.$nextTick(() => {
          this.$refs.refsmsRecord.initData()
        })
      } else if (this.activeName == 'third') {
        this.$nextTick(() => {
          this.$refs.refsmsTemplateConfig.initData()
        })
      }
    },
    dialogClose() {
      this.centerDialogVisible = false
    },
    getWechatCheckPull() {
      wechatCheckPull().then(res => {
        if (res.code == 200) {
          if (res.data.check == 1) {
            this.getSyncSurveyData()
          } else if (res.data.check == 0) {
            this.getWechatUserData()
          }
        }
      })
        .catch(() => {})
    },
    getSyncSurveyData() {
      wechatMassSyncSurvey().then(res => {
        if (res.code == 200) {
          if (res.data.sync_num != 0) {
            this.sync_num = res.data.sync_num
            if (this.userSelfClick) {
              // 用户主动点击 同步公众号粉丝
              this.centerDialogVisible = false
              this.getWechatMassSyncTask()
            } else {
              this.centerDialogVisible = true
            }
          } else {
            this.centerDialogVisible = false
          }
        }
      })
        .catch(() => {})
    },
    getWechatUserData() {
      getWechatUser().then(res => {
        if (res.code == 200) {
          this.getSyncSurveyData()
        }
      })
        .catch(() => {})
    }
  }
}
</script>
<style lang="scss" scoped>
.tipClick {
  cursor: pointer;
  color: #409eff;
}
.useLink {
  cursor: pointer;
  color: #409eff;
}
.pro-txt-first {
  margin-top: 25px;
  margin-bottom: 10px;
}
.pro-txt-second {
  margin-bottom: 25px;
}
// dialog弹窗页面居中
::v-deep .el-dialog {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  // 内容最大可见度
  max-height: 90vh;
}

::v-deep .el-dialog .el-dialog__body {
  max-height: 85% !important;
  min-height: 70%;
  overflow-y: auto;
  flex: 1;
}
</style>
